<%@ page contentType="text/html" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
<head>
	<title>Human Minority Game</title>
	<link href="../../css/zenpool.css" rel="stylesheet">
	<link href="../../css/cupertino/jquery-ui-1.8.4.custom.css" rel="stylesheet">
	<script src="../../js/jquery-1.4.2.min.js" type="text/javascript"></script>
	<script src="../../js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>

	<%/* jquery button */%>
	<script type="text/javascript">
	$(function() {
		$("button, input:submit, a", ".botones").button();
	});
	</script>
</head>
<body class="frame">
<div>

<!--[if IE]><script language="javascript" type="text/javascript" src="../../js/flot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../js/flot/jquery.flot.js"></script>

	<p class="PlotTitle">Minority</p>
	<div id="placeholder22" style="width:700px;height:150px"></div>
	<br/>
	<p class="PlotTitle">Your Score</p>
    <div id="placeholderr" style="width:700px;height:300px"></div>

<script id="source" language="javascript" type="text/javascript">
$(function () {
	var yourscore = [<c:out value="${votes}"/>];
    var minority = [<c:out value="${summaries}"/>];
    var options1 = {
	   series: {
	     lines: {show: true },
	     points: {show: true, fill: true, fillColor: "rgb(247, 163, 7)" , radius: 4}	
	   },
	   colors: ["#369"],
       xaxis: {max: 50, tickSize: 5, tickDecimals: 0},
	   yaxis: {minTickSize: 1, ticks: 10, tickDecimals: 0},
    };
    var options2 = {
    	series: {
	   		lines: { show: true },
	       	points: {show: true, fill: true, fillColor: "rgb(0, 255, 255)", radius: 4 }
	    },	
       	colors: ["#369"],
    	yaxis: {ticks: [[-1, "<c:out value="${question.answerB}"/>"], [0, ""], [1, "<c:out value="${question.answerA}"/>"]]},
    	xaxis: {max: 50, tickSize: 5, tickDecimals: 0},
    };

    $.plot($("#placeholder22"),[{data: minority}], options2);
    $.plot($("#placeholderr"),[{data: yourscore}],  options1);
});
</script>

</div>
</body>
</html>
